<template>
	<view class="maskwindow" @touchmove.stop.prevent="maskMoveHandle">
		<scroll-view scroll-y="true" v-if="orderInfo" class="order_detail" :style="'height:' + windowHeight + 'px;'">
			<view class="msg-box" style="border: none;">
				<view class="box-title">药品信息</view>
				<view class="product-box box-set" v-if="rp_products">
					<view class="product-content" v-for="(p_item,p_index) in rp_products" :key="p_index">
						<view class="product-item">
							<view class="left">
								<image class="img" :src="p_item.cart_info.product.image" mode=""></image>
							</view>
							<view class="right">
								<view class="product-name">{{formatName(p_item)}}</view>
								<view class="product-price">¥{{p_item.total_price}}</view>
							</view>
						</view>
						<view class="dosage-box" v-if="dosageForm">
							<view class="input-item">
								<view class="input-title">次数/日</view>
								<input class="el-autocomplete" v-model="dosageForm[p_item.product_id].times" placeholder="请输入每日服用次数" />
							</view>
							<view class="input-item">
								<view class="input-title">数量/次</view>
								<input class="el-autocomplete" type="text" v-model="dosageForm[p_item.product_id].nums" placeholder="请输入每次用量" />

							</view>
							<view class="input-item">
								<view class="input-title">总日数</view>
								<input class="el-autocomplete" type="text" v-model="dosageForm[p_item.product_id].days" placeholder="请输入服用天数" />

							</view>
							<view class="input-item">
								<view class="input-title">服用备注</view>
								<input class="el-autocomplete" type="text" v-model="dosageForm[p_item.product_id].marks" placeholder="请输入服用备注" />

							</view>
							<view class="input-item">
								<view class="input-title">注意事项</view>
								<input class="el-autocomplete" type="text" v-model="dosageForm[p_item.product_id].notes"
									placeholder="请输入注意事项" />
							</view>
						</view>
					</view>
					<view class="save-box">
						<view class="save-btn cursor" @click="clickSave">
							保存
						</view>
					</view>
					<view class="order-desc">
						<view class="desc-item">
							<view class="item-title">订单号：{{rp_oinfo.group_order_sn}}</view>
							<view class="item-title">收货地址：{{rp_oinfo.user_address}}</view>
						</view>
					</view>
				</view>
				<view class="item-line"></view>
				<view class="box-title">医院信息</view>
				<view class="info-box box-set" v-if="rp_doctor">
					<view class="item-set doc-item">诊所名称：{{rp_doctor.clinic_name}}</view>
					<view class="item-set doc-item">医生名称：{{rp_doctor.nickname}}</view>
					<view class="item-set doc-item">诊所地址：{{rp_doctor.clinic_addr}}</view>
					<view class="item-set doc-item">诊所电话：{{rp_doctor.clinic_phone}}</view>
				</view>
				<view class="item-line"></view>
				<view class="box-title">就诊人信息</view>
				<view class="info-box box-set" v-if="rp_inquiry">
					<view class="item-set user-item">姓名：{{rp_inquiry.patient_name}}</view>
					<view class="item-set user-item">性別：{{formatGender(rp_inquiry.patient_gender)}}</view>
					<view class="item-set user-item">年龄：{{rp_inquiry.patient_age}}岁</view>
					<view class="item-set user-item">体重：{{rp_inquiry.weight || '--'}}kg</view>
					<view class="item-set user-item">身份证号：{{rp_inquiry.id_card}}</view>
					<view class="item-set user-item">用药人和问诊人关系：{{rp_inquiry.relation}}</view>
				</view>
				<view class="item-line"></view>
				<!-- <view class="box-title">就诊人身体情况</view>
				<view class="info-box box-set" v-if="rp_inquiry">
					<view class="item-set doc-item" :class="bodyItem.id == 3?'red':''"
						v-for="(bodyItem,bodyIndex) in rp_inquiry.disease" :key="bodyIndex">
						{{formatBody(bodyItem)}}
					</view>
				</view> -->
			</view>
			<!-- 診斷 -->
			<view class="other-box">
				<view class="input-other">
					<view class="input-title">诊断症状</view>
					<input class="el-input" v-model="otherForm.diagnosis" placeholder="请输入诊断症状"/>
				</view>
				<view class="input-other">
					<view class="input-title">医生建议</view>
					<input class="el-input" v-model="otherForm.advice" placeholder="请输入建议"/>
				</view>
				<view class="input-other">
					<view class="input-title">订单备注</view>
					<input class="el-input" v-model="otherForm.notes" placeholder="请输入备注"/>
				</view>
				<!-- 按鈕 -->
				<view class="other-tool-box">
					<!-- rgba(0, 0, 0, 0.3) fullscreenLoading-->
					<view class="btn-item" @click="clickRp(1)">
						<view class="btn-preview btn-open cursor">
							立即开方
						</view>
						<view class="btn-des">*点此立即开方</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>


</template>

<script>
	import {
		prescribeOrderDetail,
		postDosage,
		postPrescribe,
		dayListApi,
		dosageListApi,
		frequencyListApi,
		instructionListApi,
		cautionListApi
	} from '@/api/user.js'

	export default {
		name: 'rp_open',
		components: {

		},
		props:{
			order_id:{
				type:[Number,String],
				default:0
			},
			orderInfo:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				fullscreenLoading: false,
				dialogVisible: false,
				rp_doctor: null,
				rp_inquiry: null,
				rp_oinfo: null,
				rp_products: null,
				dosageForm: null,
				otherForm: {
					diagnosis: '', // 诊断症状
					advice: '', // 医生建议
					notes: '', // 订单备注
				},
				windowHeight:0
			}
		},
		mounted() {

		},
		created() {
			let that = this
			this.windowHeight = uni.getSystemInfoSync().windowHeight - 40
			//this.getPrescribeDetail()
			that.rp_doctor = that.orderInfo.doctor;
			that.rp_inquiry = that.orderInfo.inquiry;
			that.rp_oinfo = that.orderInfo.oinfo;
			that.rp_products = that.orderInfo.priducts;
			that.dealDoasgeForm(that.rp_products, that.rp_oinfo);
		},
		methods: {
			
			formatBody(item) {
				let body_str = item.name + "："
				if (item.type == 1) {
					body_str = body_str + (item.select == 0 ? '正常' : '异常')
				}
				if (item.type == 2 || item.type == 4) {
					body_str = body_str + item.symptom.map(symItem => symItem).join('、')
				}
				if (item.type == 3) {
					body_str = body_str + item.place;
				}
				return body_str
			},
			formatGender(gender) {
				if (gender == 1) {
					return '男'
				}
				return '女'
			},
			formatName(proItem) {
				let name_str = this.$util.formatGoodsName(proItem);
				return name_str;
			},
			dealDoasgeForm(products, oinfo) {
				let formDeal = {}
				//默认空
				products.forEach(item => {
					formDeal[item.product_id] = {
						times: '',
						nums: '',
						days: '',
						marks: '',
						notes: ''
					}
				});
				// 赋值用量信息
				if (oinfo && oinfo.other_info) {
					formDeal = oinfo.other_info
				}
				this.dosageForm = formDeal;
			},
			// openBox(id) {
			// 	this.dialogVisible = true
			// 	this.order_id = id;
			// 	this.getPrescribeDetail();
			// 	this.resetOtherForm();
			// },
			// handleClose() {
			// 	this.dialogVisible = false
			// },
			getPrescribeDetail() {
				let that = this
				prescribeOrderDetail(this.order_id).then(res => {
					console.log(res)
					let resData = res.data;
					that.orderInfo = resData;
					that.rp_doctor = resData.doctor;
					that.rp_inquiry = resData.inquiry;
					that.rp_oinfo = resData.oinfo;
					that.rp_products = resData.priducts;
					that.dealDoasgeForm(that.rp_products, that.rp_oinfo);
				}).catch(err => {
					that.$util.Tips({
						title:err
					});
				});
			},
			checkDosage() {
				let pass = true;
				this.rp_products.forEach(item => {
					let dosageObjec = this.dosageForm[item.product_id];
					// || !dosageObjec.notes
					if (!dosageObjec.times || !dosageObjec.nums || !dosageObjec.days || !dosageObjec.marks) {
						pass = false;
					}
				});
				return pass;
			},
			clickSave(showAlert = true) {
				// console.log("rk===>[保存1]" + JSON.stringify(this.dosageForm));
				if (!this.checkDosage()) {
					this.fullscreenLoading = false;
					return this.$util.Tips({ title: '请补充完整药品服用信息' });
				}
				let postDic = {
					order_id: this.order_id,
					dosage: JSON.stringify(this.dosageForm),
				}
				postDosage(postDic).then(res => {
					if (showAlert) {
						this.$util.Tips({
							title:res.message
						});
					}
				}).catch(err => {
					this.$util.Tips({
						title:'保存失败'
					});
				
				});
			},
			clickRp(isCreate) {
				if (!this.checkDosage()) {
					return this.$util.Tips({title:'请补充完整药品服用信息'});
				}

				if (!this.otherForm.diagnosis) {
					return this.$util.Tips({title:'请填写诊断症状'});
				}
				//
				this.fullscreenLoading = true;
				this.clickSave(false);

				this.otherForm.iscreate = isCreate;
				this.otherForm.order_id = this.order_id;

				setTimeout(() => {
					postPrescribe(this.otherForm).then(res => {
						this.fullscreenLoading = false;
						if (isCreate) {
							this.$util.Tips({title:res.message});
							this.$emit("refreshList", res.data[0]);
							this.dialogVisible = false;
							this.resetOtherForm();
						} else {
							// 預覽
							//this.$emit("previewRp", res.data);
						}
					}).catch(err => {
						this.fullscreenLoading = false;
						this.$util.Tips({title:err});
					});
				}, 500)
			},
			resetOtherForm() {
				this.otherForm = {
					diagnosis: '',
					advice: '',
					notes: '',
				}
			},
			maskMoveHandle(){
				
			}

		}
	}
</script>
<style lang="scss" scoped>
	
	
	.maskwindow {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 777;
		
	}
	
	.auto-box {
		.auto-keys {
			color: #333;
			margin-right: 10px;
		}

		.auto-chi {
			color: #333;
			margin-right: 10px;
		}

		.aoto-en {
			color: #999;
		}
	}
	.cursor {
	    cursor:pointer;
	}
	
	.order_detail {
		background-color: #FFF;
		margin: 20px;
		display: flex;
		position: relative;
		width:calc(100% - 40px);
		.msg-box {
			
			
			border-bottom: 1px solid #E8EAED;

			.box-title {
				border-left: solid 2px red;
				margin-top: 10px;
				margin-left: 10px;
				padding: 0 5px;
				font-size: 14px;
				color: #333;
				font-weight: bold;
			}

			.box-set {
				padding: 5px 10px;
			}

			.product-box {
				.product-content {
					.product-item {
						padding: 5px 0;
						display: flex;
						align-items: center;

						.left {
							width: 50px;
							height: 50px;

							.img {
								width: 50px;
								height: 50px;
							}
						}

						.right {
							padding: 0 8px;
							display: flex;
							flex-direction: column;

							.product-name {}

							.product-price {
								margin-top: 5px;
								color: #ff0000;
							}
						}
					}

					.dosage-box {
						
						.input-item {
							padding: 8px 0;
							display: flex;
							align-items: center;

							.input-title {
								width: 80px;
								font-size: 14px;
								margin-right: 10px;
								text-align: right;
							}
						}

						.el-autocomplete {
							display: flex;
							flex: 1;
							margin-right: 15px;
							height: 35px;
							border: 1px solid #eee;
							border-radius: 4px;
							padding-left: 15px;
						}
					}
				}

				.save-box {
					display: flex;
					justify-content: flex-end;
					padding: 10px 10px;

					.save-btn {
						background-color: #ff0000;
						padding: 4px 6px;
						color: #fff;
						font-size: 12px;
						border-radius: 3px;
					}
				}

				.order-desc {
					width: 100%;
					padding-left: 20px;

					.desc-item {
						display: flex;
						flex-direction: column;
						// flex-wrap: wrap;

						.item-title {
							font-size: 14px;
							margin-bottom: 10px;
							// &:nth-child(2n+1) {
							// 	width: 40%;
							// }

							// &:nth-child(2n) {
							// 	width: 60%;
							// }
						}
					}
				}
			}

			.item-line {
				margin: 10px 0;
				background-color: #eee;
				height: 1px;
			}

			.info-box {
				display: flex;
				// flex-wrap: wrap;
				flex-direction: column;
				.item-set {
					font-size: 14px;
					padding: 10px 0 0;
				}

				.doc-item {
					// width: 50%;
				}

				.user-item {
					// width: 33.33%;
				}

				.red {
					color: #ff0000;
				}
			}
		}

		.other-box {
			margin: 30px 0 0 10px;

			.input-other {
				padding: 8px 0;
				display: flex;
				align-items: center;

				.input-title {
					width: 80px;
					font-size: 15px;
					margin-right: 10px;
					text-align: right;
				}

				.input-othet {}
				.el-input{
					height: 35px;
					padding-left: 15px;
					display: flex;
					margin-right: 15px;
					flex: 1;
					border: none !important;
					border-radius: 0 !important;
					border-bottom: 1px solid #DCDFE6 !important;
				}
				
			}

			.other-tool-box {
				display: flex;
				justify-content: flex-end;
				padding: 20px 10px 30px 0;
				
				
					.btn-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 20px;

						.btn-preview {
							padding: 5px 10px;
							border: 1px solid #ff0000;
							color: #ff0000;
							font-size: 14px;
							border-radius: 100px;
						}

						.btn-open {
							background-color: #ff0000 !important;
							color: #fff !important;
						}

						.btn-des {
							padding: 5px 0;
							font-size: 12px;
						}
					}
				
			}
		}

	}
</style>